<template>
  <div class="carousel">
    <!-- 左 -->
    <div
      class="pointer"
      style="margin-top:5px;width:16px;height:100%;float:left;box-shadow:0px 3px 7px 0px rgba(237,237,237,1);"
      @click="left"
    >
      <i class="el-icon-arrow-left" style="margin-top:42px;color:rgba(179,179,179,1);"></i>
    </div>

    <!-- 中间 -->
    <div class="box">
      <ul ref="boxUl" @mousedown="down" style="margin-top:5px;">
        <li v-for="(item) in message" :key="item.key">
          <!-- blue -->
          <div style="width:100%;height:100%;" v-if="item.stoptime">
            <div
              style="font-size:16px;font-weight:bold;color:rgba(76,135,255,1);margin-top:5px;"
            >报警解除</div>
            <div style="font-size:12px;color:rgba(51,51,51,1);margin-top:11px;">在此时间烟感报警解除</div>
            <div style="font-size:12px;color:rgba(153,153,153,1);margin-top:4px;">{{item.stoptime}}</div>
          </div>
          <!-- red -->
          <div style="width:100%;height:100%;" v-if="item.starttime">
            <div style="font-size:16px;font-weight:bold;color:#EB3838;margin-top:5px;">烟感报警</div>
            <div style="font-size:12px;color:rgba(51,51,51,1);margin-top:11px;">在此时间触发烟感报警</div>
            <div style="font-size:12px;color:rgba(153,153,153,1);margin-top:4px;">{{item.starttime}}</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 右 -->
    <div
      class="pointer"
      style="margin-top:5px;width:16px;height:100%;float:right;box-shadow:0px 3px 7px 0px rgba(237,237,237,1);"
      @click="right"
    >
      <i class="el-icon-arrow-right" style="margin-top:42px;color:rgba(179,179,179,1);"></i>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: ['message'],
  data() {
    return {
      target: 0, // 移动到的位置/当前位置
      length: null, // 总长度
    }
  },

  watch: {
    message(data) {
      this.length = data.length * 180
      this.target = 0
      // this.animate(this.$refs.boxUl, this.target)
      this.$refs.boxUl.style.left = 0 + 'px'
      // console.log(data)
    }
  },

  methods: {
    // 运动功能函数封装
    animate(obj, target) {
      // 开启定时器之前，先做下清除
      clearInterval(obj.timer) // 具体标注下哪个对象的定时器
      var speed = target > obj.offsetLeft ? 10 : -10
      obj.timer = setInterval(function () {
        // 保存了一个差值
        var result = target - obj.offsetLeft
        // 运动公式
        obj.style.left = obj.offsetLeft + speed + 'px'
        if (Math.abs(result) <= 10) {
          obj.style.left = target + 'px'
          clearInterval(obj.timer)
        }
      }, 5)
    },
    // 左按钮
    left() {
      if (this.length > 720) {
        this.target += 720
        if (this.target >= 0) {
          this.target = 0
        }
        this.animate(this.$refs.boxUl, this.target)
      }
    },
    // 右按钮
    right() {
      if (this.length > 720) {
        this.target += -720
        if (this.target <= -this.length + 720) {
          this.target = -this.length + 720
        }
        this.animate(this.$refs.boxUl, this.target)
      }
    },
    // 鼠标按下
    down(e) {
      if (this.length > 720) {
        let odiv = this.$refs.boxUl;        //获取目标元素

        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;

        document.onmousemove = (e) => {       //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;

          // console.log(left, 2)

          //移动当前元素
          odiv.style.left = left + 'px';

          if (odiv.offsetLeft >= 0) {
            odiv.style.left = 0 + 'px';
            this.target = 0
          }
          if (odiv.offsetLeft <= -this.length + 720) {
            odiv.style.left = -this.length + 720 + 'px';
            this.target = odiv.style.left
          }
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;

          let integer = ~~(-odiv.offsetLeft / 180) // 取整
          let decimals = -odiv.offsetLeft / 180 // 原值
          let compare = integer + 0.5 // 比较值

          if (compare < decimals) {
            this.target = (-integer - 1) * 180
            this.animate(this.$refs.boxUl, this.target)
          } else {
            this.target = -integer * 180
            this.animate(this.$refs.boxUl, this.target)
          }
        };
      }
    }
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>
.carousel {
  width: 752px;
  height: 100px;
  user-select:none;
  .pointer:hover {
    cursor: pointer;
  }
  .box {
    float: left;
    width: 720px;
    height: 110px;
    position: relative;
    // background: black;
    overflow: hidden;
    ul {
      width: 100000%;
      height: 100%;
      list-style: none;
      position: absolute;
      left: 0px;

      li {
        width: 160px;
        height: 100px;
        float: left;
        background: #fff;
        box-shadow: 0px 3px 7px 0px rgba(237, 237, 237, 1);
        margin: 0 10px;
        padding: 12px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
